<h2 mat-dialog-title>{{ isEdit ? 'Edit' : 'Create' }} Browser Profile</h2>
<mat-dialog-content class="mat-typography">
    <mat-stepper orientation="vertical" #stepper>
        <!-- Basic info -->
        <mat-step [stepControl]="basicInfoFormGroup">
            <form [formGroup]="basicInfoFormGroup">
                <ng-template matStepLabel>Basic information</ng-template>
                <mat-form-field>
                    <mat-label>Name</mat-label>
                    <input matInput placeholder="Profile name" formControlName="profileName" required />
                    <mat-error
                        *ngIf="
                            basicInfoFormGroup.get('profileName')?.invalid &&
                            basicInfoFormGroup.get('profileName')?.touched
                        "
                    >
                        Profile name is required.
                    </mat-error>
                </mat-form-field>

                <mat-form-field>
                    <mat-label>Group</mat-label>
                    <input
                        matInput
                        placeholder="Group name"
                        formControlName="groupName"
                        [matAutocomplete]="groupNameAuto"
                    />
                    <mat-autocomplete autoActiveFirstOption #groupNameAuto="matAutocomplete">
                        @for (groupName of filteredGroupNames | async; track groupName) {
                            <mat-option [value]="groupName">
                                {{ groupName }}
                            </mat-option>
                        }
                    </mat-autocomplete>
                </mat-form-field>

                @if (true) {
                    <mat-form-field>
                        <mat-label>Description</mat-label>
                        <textarea matInput formControlName="description" placeholder="Type a description"></textarea>
                    </mat-form-field>
                }

                <div>
                    <button mat-button matStepperNext>Next</button>
                </div>
            </form>
        </mat-step>

        <!-- Import profile -->
        @if (true) {
            <mat-step [stepControl]="botProfileInfoGroup">
                @if (botProfileBasicInfo && !botProfileBasicInfo.isEncryptedProfile) {
                    <div>
                        <p>Version: {{ botProfileBasicInfo.version }}</p>
                        <p>User Agent: {{ botProfileBasicInfo.userAgent }}</p>
                    </div>
                }

                <mat-error *ngIf="!botProfileInfoGroup?.value?.content"> Bot Profile is required. </mat-error>

                <form [formGroup]="botProfileInfoGroup">
                    <ng-template matStepLabel>
                        {{ isEdit ? 'Replace Bot profile' : 'Bot profile' }}
                    </ng-template>
                    <mat-label>Select a bot profile:</mat-label>
                    <button mat-button (click)="chooseFile()">Choose File</button>
                    <div>
                        <button mat-button matStepperNext>Next</button>
                    </div>
                </form>
            </mat-step>
        }

        <!-- Proxy info -->
        <mat-step [stepControl]="proxyInfoGroup">
            <form [formGroup]="proxyInfoGroup">
                <ng-template matStepLabel>Proxy information</ng-template>
                <mat-form-field>
                    <mat-label>Proxy</mat-label>
                    <input matInput placeholder="host:port" formControlName="proxyHost" />
                </mat-form-field>

                <mat-form-field>
                    <mat-label>Username</mat-label>
                    <input matInput placeholder="Proxy user name" formControlName="username" />
                </mat-form-field>

                <mat-form-field>
                    <mat-label>Password</mat-label>
                    <input matInput placeholder="Proxy password" formControlName="password" />
                </mat-form-field>
                <div>
                    <button mat-button matStepperNext>Next</button>
                </div>
            </form>
        </mat-step>

        <!-- Variable info -->
        @if (variablesInfoGroup) {
            <mat-step [stepControl]="variablesInfoGroup">
                <form [formGroup]="variablesInfoGroup">
                    <ng-template matStepLabel>Other configurations</ng-template>

                    <mat-form-field>
                        <mat-label>Locale</mat-label>
                        <input
                            matInput
                            placeholder="Input locale"
                            formControlName="locale"
                            [matAutocomplete]="localeAuto"
                        />
                        <mat-autocomplete autoActiveFirstOption #localeAuto="matAutocomplete">
                            @for (option of filteredLocales | async; track option) {
                                <mat-option [value]="option">
                                    {{ option }}
                                </mat-option>
                            }
                        </mat-autocomplete>
                    </mat-form-field>

                    @if (botProfileBasicInfo && !botProfileBasicInfo.isEncryptedProfile) {
                        <mat-form-field>
                            <mat-label>Timezone</mat-label>
                            <input
                                matInput
                                placeholder="Input timezone"
                                formControlName="timezone"
                                [matAutocomplete]="timezoneAuto"
                            />
                            <mat-autocomplete autoActiveFirstOption #timezoneAuto="matAutocomplete">
                                @for (option of filteredTimezones | async; track option) {
                                    <mat-option [value]="option">
                                        {{ option }}
                                    </mat-option>
                                }
                            </mat-autocomplete>
                        </mat-form-field>

                        <p>
                            <mat-checkbox formControlName="disableConsoleMessage"> Prevent CDP detection </mat-checkbox>
                        </p>

                        <p>
                            <mat-checkbox formControlName="noisesCanvas2d"> Add noise to 2D canvas </mat-checkbox>
                        </p>

                        <p>
                            <mat-checkbox formControlName="noisesCanvasWebgl"> Add noise to WebGL canvas </mat-checkbox>
                        </p>

                        <p>
                            <mat-checkbox formControlName="noisesClientRectsFactor">
                                Add noise to DOM rects
                            </mat-checkbox>
                        </p>

                        <p>
                            <mat-checkbox formControlName="noisesTextMetricsFactor">
                                Add noise to text metrics
                            </mat-checkbox>
                        </p>

                        <p>
                            <mat-checkbox formControlName="noisesAudio"> Add noise to audio </mat-checkbox>
                        </p>
                    }

                    <mat-form-field>
                        <mat-label>Path of the BotBrowser executable (optional)</mat-label>
                        <input matInput formControlName="botBrowserBinaryPath" />

                        <mat-error
                            *ngIf="variablesInfoGroup.get('botBrowserBinaryPath')?.errors?.invalidBotBrowserPath"
                        >
                            {{ variablesInfoGroup.getError('invalidBotBrowserPath') }}
                        </mat-error>
                    </mat-form-field>
                </form>
            </mat-step>
        }
    </mat-stepper>
</mat-dialog-content>
<mat-dialog-actions align="end">
    <button mat-button mat-dialog-close>Cancel</button>
    <button mat-button [mat-dialog-close]="true" cdkFocusInitial (click)="onConfirmClick()">
        {{ isEdit ? 'Save' : 'Create' }}
    </button>
</mat-dialog-actions>
